<!DOCTYPE HTML>
<html>

<head>
   <title>商品评论</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/my-style.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
   <div class="container">
      <div class="detail-page">
         <div class="detail-page-title">
            <h4>商品评论</h4>
         </div>
         <div class="jx-search-container">
            <form id="J_Form" class="jx-form form-horizontal jx-form-thin" method="post">
               <div class="row">
                  <div class="control-group span7">
                     <label class="control-label">商品名称：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="orderName">
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">订单编号：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="goodsName">
                     </div>
                  </div>
                  <div class="control-group span11">
                     <label class="control-label">评论时间：</label>
                     <div class="controls">
                        <input class="calendar calendar-time" type="text" name="startTime" id="startTime"><span> &nbsp;-&nbsp; </span>
                        <input class="calendar calendar-time" type="text" name="endTime" id="endTime">
                     </div>
                  </div>
               </div>
               <div class="row ">
                  <div class="control-group span7">
                     <label class="control-label">买家：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="receiverPhone">
                     </div>
                  </div>
                  <div class="control-group span7">
                     <label class="control-label">商户：</label>
                     <div class="controls">
                        <input type="text" class=" control-text" id="receiverPhone">
                     </div>
                  </div>

                  <div class="control-group span7">
                     <label class="control-label">状态：</label>
                     <div class="controls">
                        <select id="refundStatus" name="refundStatus">
                           <option value="0">仅退款</option>
                           <option value="1">退货退款</option>
                        </select>
                     </div>
                  </div>
                  <div class="control-group span2 pull-right">
                     <button type="submit" class="jx-btn btn-default">搜索</button>
                  </div>
               </div>

            </form>
         </div>
         <div id="tab"></div>
         <div id="panel" class="">
            <div>
               <div id="grid"></div>
               <div></div>
               <div></div>
            </div>
         </div>
      </div>
   </div>
   </div>
   <!-- 初始隐藏 remakesDialog内容 -->
   <div id="remarks" class="hide">
      <form class="form-horizontal">
         <div id="" class="row">
            <div class="control-group span12">
               <div class="control-row4 ">
                  <textarea class="input-large" type="text"></textarea>
               </div>
            </div>

         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>

   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      BUI.use(['bui/grid', 'bui/data', 'bui/calendar', 'bui/tab','bui/overlay', 'common/search'], function (Grid, Data, Calendar,
         Tab,Overlay, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
                  title: '评论星级',
                  elCls: 'center',
                  dataIndex: 'a',
                  width: 150,
                  renderer: function (value, obj) {
                     return '<div class="td-inner">' +
                        '        <span class="iconfont jx-text-danger">&#xf0144;</span><span class="iconfont jx-text-danger">&#xf0144;</span><span class="iconfont jx-text-danger">&#xf0144;</span>' +
                        '        <span class="iconfont">&#xf0144;</span><span class="iconfont">&#xf0144;</span>' +
                        '        <p>中评</p>' +
                        '</div>'
                  }
               },



               {
                  title: '商品评论',
                  dataIndex: 'b',
                  elCls: 'center', //居中
                  width: 300,
                  renderer: function (value, obj) {
                     return '<div class="td-comment">' +
                        '     <div class="item">' +
                        '        <p>【评论】商品质量非常好，配送速度超级快呀！</p>' +
                        '        <img class="pro-img"   src="../../../assets/img/u9486.png" alt=""> <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '        <p class="jx-text-disabled">2018-05-02 15:30:25</p>' +
                        '     </div>' +
                        '     <div>' +
                        '        <p>【回复】谢谢，欢迎回购！</p>' +
                        '        <p class="jx-text-disabled">2018-05-02 15:30:25</p>' +
                        '     </div>' +
                        '</div>'
                  }
               },
               {
                  title: '<span style="display: inline-block;width:270px;text-align:center;">商品信息</span>',
                  dataIndex: 'c',
                  elCls: 'td-pro', //居中
                  width: 300,
                  renderer: function (value, obj) {
                     return '<div class="td-inner">' +
                        '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '  <div class="pro-info  ml-10">' +
                        '      <p>adidas/阿迪达斯  中性经典鞋   运动生活系列......</p>' +
                        '  </div>' +
                        '</div>'
                  }
               }, {
                  title: '订单编号',
                  elCls: 'center',
                  dataIndex: 'd',
                  width: 150
               }, {
                  title: '买家',
                  elCls: 'center',
                  dataIndex: 'e',
                  width: 150,
                  renderer: function (value, obj) {
                     return '<div>' +
                        '  <p >Aillian_wang</p>' +
                        '  <p >15921172492</p>' +
                        '</div>'
                  }
               }, {
                  title: '商户',
                  elCls: 'center',
                  dataIndex: 'f',
                  width: 150
               }, {
                  title: '下单时间',
                  elCls: 'center',
                  dataIndex: 'g',
                  width: 150
               }, {
                  title: '操作',
                  dataIndex: 'i',
                  elCls: 'center',
                  width: 200,
                  renderer: function (value, obj) {
                     var replyStr = '<span class="grid-command reply-btn">[回复]</span>';
                     var frozenStr = '<span class="grid-command frozen-btn">[屏蔽]</span>';
                     return replyStr + frozenStr;
                  }
               }
            ],
            data = [{
               a: '好评',
               b: '',
               c: 'E384947878782',
               d: 'E384947878782',
               e: '激想体育特卖号',
               f: '激想体育特卖号',
               g: '2018-04-21 15:30:28'
            }];
         var datepicker = new Calendar.DatePicker({
            trigger: '.calendar',
            autoRender: true
         });
         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'small-bui-grid-table',
               columns: columns,
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               store: store
            }),
            tab = new Tab.TabPanel({
               render: '#tab',
               elCls: 'nav-tabs',
               panelContainer: '#panel', //如果内部有容器，那么会跟标签项一一对应，如果没有会自动生成
               //                 selectedEvent : 'mouseenter',//默认为click,可以更改事件
               autoRender: true,
               children: [{
                  id: '0',
                  title: '全部',
                  value: '2',
               }, {
                  id: '1',
                  title: '好评(5)',
                  value: '1',
               }, {
                  id: '2',
                  title: '中评(500)',
                  value: '3',
               }, {
                  id: '3',
                  title: '差评(100)',
                  value: '3',
               }]
            });
         var index = 0;
         tab.on('selectedchange', function (ev) {
            var item = ev.item;
         });

         tab.setSelected(tab.getItemAt(0));

         grid.render();
         //点击操作
         grid.on('itemclick', function (ev) {
            var sender = $(ev.domTarget),
               itemEl = $(ev.element),
               item = ev.item;
            if (sender.hasClass('reply-btn')) { //点击回复
               remarksDialog.show();
            } else if (sender.hasClass('frozen-btn')) {
               frozenFunction(item, itemEl)
            }
         });

         //屏蔽评论
         function frozenFunction(item, itemEl) {
            BUI.Message.Confirm('确认屏蔽该评论吗？', function () {

            }, 'question');
         }
         //回复
         var remarksDialog = new Overlay.Dialog({
            title: '评论回复',
            width: 380,
            //配置DOM容器的编号
            contentId: 'remarks',
            success: function () {
               //点击成功时候操作
               BUI.Message.Alert('回复成功');
               this.close();
            }
         });
      });
   </script>
   <!-- script end -->

</body>

</html>